import { defineComponent } from "vue"
import { ref } from "vue"

export default defineComponent({
	name: "CollapseView",
	setup() {
		// V-MODEL
		const openedValue = ref<string[]>(["1"])
		// 事件
		const changeHandle = () => {
			console.log("改变了")
		}
		return () => (
			<div class="collapse-view-container">
				<h1 class="row-title">折叠组件</h1>
				<div class="row">
					<Chen-Collapse v-model={openedValue.value} onChangeHandle={changeHandle}>
						<Chen-Collapse-Item name="1" title="Consistency">
							<div>
								Consistent with real life: in line with the process and logic of real life,
								and comply with languages and habits that the users are used to;
							</div>
							<div>
								Consistent within interface: all elements should be consistent, such as:
								design style, icons and texts, position of elements, etc.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="2" title="Feedback">
							<div>
								Operation feedback: enable the users to clearly perceive their operations by
								style updates and interactive effects;
							</div>
							<div>
								Visual feedback: reflect current state by updating or rearranging elements of
								the page.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="3" title="Efficiency">
							<div>Simplify the process: keep operating process simple and intuitive;</div>
							<div>
								Definite and clear: enunciate your intentions clearly so that the users can
								quickly understand and make decisions;
							</div>
							<div>
								Easy to identify: the interface should be straightforward, which helps the
								users to identify and frees them from memorizing and recalling.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="4" title="Controllability">
							<div>
								Decision making: giving advices about operations is acceptable, but do not
								make decisions for the users;
							</div>
							<div>
								Controlled consequences: users should be granted the freedom to operate,
								including canceling, aborting or terminating current operation.
							</div>
						</Chen-Collapse-Item>
					</Chen-Collapse>
				</div>
				<h1 class="row-title">手风琴效果</h1>
				<div class="row">
					<Chen-Collapse v-model={openedValue.value} onChangeHandle={changeHandle} accordion>
						<Chen-Collapse-Item name="1" title="Consistency">
							<div>
								Consistent with real life: in line with the process and logic of real life,
								and comply with languages and habits that the users are used to;
							</div>
							<div>
								Consistent within interface: all elements should be consistent, such as:
								design style, icons and texts, position of elements, etc.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="2" title="Feedback">
							<div>
								Operation feedback: enable the users to clearly perceive their operations by
								style updates and interactive effects;
							</div>
							<div>
								Visual feedback: reflect current state by updating or rearranging elements of
								the page.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="3" title="Efficiency">
							<div>Simplify the process: keep operating process simple and intuitive;</div>
							<div>
								Definite and clear: enunciate your intentions clearly so that the users can
								quickly understand and make decisions;
							</div>
							<div>
								Easy to identify: the interface should be straightforward, which helps the
								users to identify and frees them from memorizing and recalling.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="4" title="Controllability">
							<div>
								Decision making: giving advices about operations is acceptable, but do not
								make decisions for the users;
							</div>
							<div>
								Controlled consequences: users should be granted the freedom to operate,
								including canceling, aborting or terminating current operation.
							</div>
						</Chen-Collapse-Item>
					</Chen-Collapse>
				</div>
				<h1 class="row-title">单项禁用效果</h1>
				<div class="row">
					<Chen-Collapse v-model={openedValue.value} onChangeHandle={changeHandle} accordion>
						<Chen-Collapse-Item name="1" title="Consistency">
							<div>
								Consistent with real life: in line with the process and logic of real life,
								and comply with languages and habits that the users are used to;
							</div>
							<div>
								Consistent within interface: all elements should be consistent, such as:
								design style, icons and texts, position of elements, etc.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="2" title="Feedback" disabled>
							<div>
								Operation feedback: enable the users to clearly perceive their operations by
								style updates and interactive effects;
							</div>
							<div>
								Visual feedback: reflect current state by updating or rearranging elements of
								the page.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="3" title="Efficiency">
							<div>Simplify the process: keep operating process simple and intuitive;</div>
							<div>
								Definite and clear: enunciate your intentions clearly so that the users can
								quickly understand and make decisions;
							</div>
							<div>
								Easy to identify: the interface should be straightforward, which helps the
								users to identify and frees them from memorizing and recalling.
							</div>
						</Chen-Collapse-Item>
						<Chen-Collapse-Item name="4" title="Controllability">
							<div>
								Decision making: giving advices about operations is acceptable, but do not
								make decisions for the users;
							</div>
							<div>
								Controlled consequences: users should be granted the freedom to operate,
								including canceling, aborting or terminating current operation.
							</div>
						</Chen-Collapse-Item>
					</Chen-Collapse>
				</div>
			</div>
		)
	},
})
